<template>
  <cy-form class="EditForm" label-width="auto" style="max-width: 31.25rem">
    <cy-form-item v-for="(item, index) in editFormColumns" :key="index" :label="item.label">
      <el-input v-model="editform[item.prop]" :readonly="item.isReadonly ? item.isReadonly : false" />
    </cy-form-item>
    <cy-form-item>
      <el-button type="primary" @click="onSubmit">确认</el-button>
      <el-button @click="editdrawer = false">取消</el-button>
    </cy-form-item>
  </cy-form>
</template>

<script lang="tsx" setup>
import { reactive,onMounted } from 'vue'
import CyForm from "@/components/form";
import { UpdateResidentByIdAPI } from "@/api/resident";
import { assignObject } from "@/utils/object";
const props = defineProps({
  CurrentData: {
    type: Object,
    required: true,
    default: () => {}
  }
})
const emit = defineEmits(["EditSure"]);
// 修改表单配置
const editFormColumns = [
  { label: "居民ID", prop: "resident_id", isReadonly: true },
  { label: "家庭ID", prop: "family_id" },
  { label: "姓名", prop: "name" },
  { label: "年龄", prop: "age" },
  { label: "出生时间", prop: "date_of_birth" },
  { label: "家庭位置", prop: "relationship" },
  { label: "电话", prop: "phone" },
  { label: "地址", prop: "address" },
  { label: "登记时间", prop: "registration_date" },
  { label: "备注", prop: "notes" },
];
// 修改表单
const editform = reactive({
  resident_id: "",
  family_id: "",
  name: "",
  age: "",
  gender: "",
  date_of_birth: "",
  relationship: "",
  phone: "",
  address: "",
  registration_date: "",
  notes: "",
});
const useParent = () => {
  emit("EditSure");
};
const GetEditForm = (value: any) => {
  // assignObject(editform, value);
  console.log(value);

}
// 确认修改提交
const onSubmit = () => {
  UpdateResidentByIdAPI(editform).then((res) => {
    const { code, message } = res.data;
    useParent();
  });
};
defineExpose({ GetEditForm })
onMounted(()=>{
  if(props.CurrentData){
    assignObject(editform, props.CurrentData);
  }
})
</script>
<style scoped lang="scss">
.Box {
  position: relative;

  .SearchBox {
    width: 100%;
    height: 60px;
    background-color: #fff;
    border-bottom: 1px solid #eee;

    .el-input {
      width: 350px;
      margin-left: 0.5rem;
    }

    .searchBtn {
      color: rgb(15, 153, 245);
    }

    .addBtn {
      margin-right: 1rem;
    }
  }

  .PageBox {
    background-color: #fff;
    padding-left: 30%;
    margin: 1rem;
  }

  .TableBox {
    .Table {
      width: 100%;
      min-height: 25rem;
      border-top: 1px solid #eee;
    }

    :deep(.status-active) {
      color: green;
    }

    :deep(.status-unactive) {
      color: #f56c6c;
    }

    :deep(.OptionsBtn) {
      height: 30px;
      line-height: 30px;
      width: 8.125rem;
      border: 1px solid #f56c6c;
      border-radius: 0.3rem;
      text-align: center;
      background-color: #f56c6c;
      color: #fff;
      float: right;
      cursor: pointer;

      &:hover {
        background-color: #e78d8d;
        border: 1px solid #e78d8d;
      }
    }
  }

  .EditForm {
    :deep(.el-form-item__content) {
      display: flex;
      justify-content: center;
      align-content: center;
    }
  }
}
</style>
